<template>
    <div
      class="slider-container"
      @mousedown="onMouseDown"
      @mousemove="onMouseMove"
      @mouseup="onMouseUp"
      @mouseleave="onMouseUp"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    >
      <div class="slider" ref="sliderRef" :style="{ transform: `translateX(-${currentIndex.value * itemWidth.value}px)` }">
        <slot></slot>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  
  const sliderRef = ref(null);
  const currentIndex = ref(0);
  const itemWidth = ref(0);
  const isDragging = ref(false);
  const startX = ref(0);
  const startTranslateX = ref(0);
  const touchStartX = ref(0);
  const touchEndX = ref(0);
  const itemCount = ref(0);
  
  onMounted(() => {
    if (sliderRef.value) {
      const firstItem = sliderRef.value.firstElementChild;
      if (firstItem) {
        itemWidth.value = firstItem.offsetWidth;
      }
      itemCount.value = sliderRef.value.children.length;
    }
  });
  
  const onMouseDown = (e) => {
    isDragging.value = true;
    startX.value = e.clientX;
    startTranslateX.value = currentIndex.value * itemWidth.value;
    sliderRef.value.style.transition = 'none';
  };
  
  const onMouseMove = (e) => {
    if (isDragging.value) {
      const deltaX = e.clientX - startX.value;
      const translateX = startTranslateX.value - deltaX;
      sliderRef.value.style.transform = `translateX(-${translateX}px)`;
    }
  };
  
  const onMouseUp = (e) => {
    if (isDragging.value) {
      isDragging.value = false;
      sliderRef.value.style.transition = 'transform 0.3s ease';
      const deltaX = startX.value - e.clientX;
      const threshold = 50;
  
      if (deltaX > threshold && currentIndex.value > 0) {
        currentIndex.value--;
      } else if (deltaX < -threshold && currentIndex.value < itemCount.value - 1) {
        currentIndex.value++;
      }
      sliderRef.value.style.transform = `translateX(-${currentIndex.value * itemWidth.value}px)`;
    }
  };
  
  const onTouchStart = (e) => {
    touchStartX.value = e.touches[0].clientX;
  };
  
  const onTouchMove = (e) => {
    // 可添加实时反馈
  };
  
  const onTouchEnd = (e) => {
    touchEndX.value = e.changedTouches[0].clientX;
    const deltaX = touchEndX.value - touchStartX.value;
    const threshold = 50;
  
    if (deltaX > threshold && currentIndex.value > 0) {
      currentIndex.value--;
    } else if (deltaX < -threshold && currentIndex.value < itemCount.value - 1) {
      currentIndex.value++;
    }
    sliderRef.value.style.transform = `translateX(-${currentIndex.value * itemWidth.value}px)`;
  };
  </script>
  
  <style scoped>
  .slider-container {
    position: relative;
    width: 100%; /* 宽度跟随父元素 */
    height: 200px; /* 设置固定高度 */
    overflow: hidden; /* 隐藏超出部分 */
    display: flex; /* 使用 Flexbox 布局 */
  }
  
  .slider {
    display: flex;
    flex-shrink: 0; /* 防止子元素收缩 */
    transition: transform 0.3s ease;
  }
  
  /* 可以根据需要调整子项的样式 */
  .slider > * {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    user-select: none;
  }
  </style>    